<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.dom {
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>

<body>

	<div class="dom"></div>
	<script>
		// 		☞ Dom.classList.add("类名"): 给当前dom元素添加类样式

		// ☞ Dom.classList.remove("类名"); 给当前dom元素移除类样式

		// ☞ classList.contains("类名"); 检测是否包含类样式

		// ☞ classList.toggle("active");  切换类样式（有就删除，没有就添加）

		var dom = document.querySelector('.dom')
		// var doms=document.querySelectorAll('.dom')    //伪数组
		// console.dir(doms)

		// var dom=document.querySelectorAll('.dom')[0]
		// console.log(dom);

		dom.classList.add('border')

		// console.log(dom);

		dom.classList.remove('border');
		console.log(dom);


		var flag = dom.classList.contains("dom")

		console.log(flag)


		dom.classList.toggle("active")  //有就删除这个类 没有就添加
		console.log(dom);

		dom.classList.toggle("active")

			console.log(dom);


	</script>
</body>

</html>